<template>
  <div class="common-body">
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/paymentManagement/application/applicationAll'
          }"
          >付款管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/paymentManagement/paidConfirmList/paidConfirmAll'
          }"
          >代付管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-if="
            $route.query.states === 'paidApproval' ||
            $route.query.states === 'paidDetail'
          "
          :to="{
            path: '/paymentManagement/paidApprove/approvalPending'
          }"
          >代付审批
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-else-if="$route.query.taizhang == 1"
          :to="{
            path: '/paymentManagement/paidParameterList/index'
          }"
          >代付台账
        </el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{
            path: '/paymentManagement/paidConfirmList/paidConfirmAll'
          }"
          v-else
          >代付确认
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span v-if="this.$route.query.ifButton == 1"> 审核 </span>
          <span
            v-else-if="
              this.$route.query.from === 'pending' &&
              this.$route.query.states !== 'paidDetail'
            "
          >
            代付审批
          </span>
          <span v-else> 查看 </span>
          <span class="ccui-curr-crumb ccui-ml-10">
            {{ titleName }}
          </span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div
      :class="[approvingStatus ? 'detail-box' : 'details-box', 'ccui-clearfix']"
    >
      <div class="detail-info">
        <div
          class="detail-info-el-Label"
          style="z-index: 999; pointer-events: none"
        >
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div class="detail-info-form-container">
          <basicInfo :basicInfo="basicInfo"></basicInfo>
          <payInfo :basicInfo="basicInfo"></payInfo>
          <fileInfo
            ref="fileInfo"
            v-if="isTrue"
            v-model="fileList"
            state="detail"
            :title="title"
            uploadType="uploadType"
          ></fileInfo>
        </div>
      </div>
      <!-- 审批记录 -->
      <div v-if="approvingStatus">
        <approval-read-record :approvalRecordData="approvalRecordData">
        </approval-read-record>
      </div>
    </div>
    <el-bottom-guide>
      <ul class="ccui-bottom-button">
        <li>
          <el-button
            v-if="$route.query.ifButton == 1"
            type="bottom"
            icon="icon-ccui-save-submit"
            @click="handleTurn()"
            >退回供应商</el-button
          >
        </li>
        <li>
          <el-button
            v-if="$route.query.ifButton == 1"
            type="bottom"
            icon="icon-ccui-save-submit"
            @click="handleReset()"
            >保存并提交</el-button
          >
        </li>
        <li v-if="$route.query.states !== 'paidApproval'">
          <el-button type="bottom" icon="icon-ccui-return" @click="handleBack"
            >返回</el-button
          >
        </li>
        <li
          v-if="
            approving == 'approvaled' && $route.query.states !== 'paidDetail'
          "
        >
          <el-button type="bottom" icon="icon-ccui-export" @click="handleExport"
            >导出</el-button
          >
        </li>
      </ul>
    </el-bottom-guide>
    <el-dialog
      class="revokedDIalog"
      title="退回供应商"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="closeDialog"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item :label-width="labelwidth" prop="supplierSendBackReason">
          <el-input
            type="textarea"
            placeholder="请输入退回原因"
            v-model="form.supplierSendBackReason"
            style="width: 360px"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="default-mini" @click="closeDialog"
          >取消</el-button
        >
        <el-button
          size="mini"
          type="primary-font-mini"
          @click="handleTure('form')"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!--    <exportQr-->
    <!--      ref="exportQr"-->
    <!--      :curPageId="$route.query.id"-->
    <!--      :businessCode="businessCode"-->
    <!--      @downloadReportForm="handleExport"-->
    <!--    />-->
  </div>
</template>
<script>
import basicInfo from "../components/basicInfo";
import payInfo from "../components/payInfo";
import fileInfo from "@/basa/components/public/uploadInfo2";
import approvalReadRecord from "@/basa/components/public/approvalRecord";
import { getDataDetails, getDataSubmit, getDataTurn } from "../api";
import { ishasAgentId } from "@/basa/utils";
import { detailExport } from "@/basa/api";
import { exportData } from "@/basa/utils/public";
export default {
  data() {
    return {
      businessCode: "",
      downloadUrl: this.$addUrlPerFix(process.env.VUE_APP_BASE_URL),
      basicInfo: {}, //基本信息
      purchaseList: [], //采购清单
      fileList: [], //附件
      isTrue: false,
      titleName: "",
      activeName: "first",
      title: "附件",
      pathName: "",
      dialogVisible: false, // 退回弹框,
      uploadType: true,
      form: {
        supplierSendBackReason: ""
      },
      rules: {
        supplierSendBackReason: [
          { required: true, message: "请输入退回原因", trigger: "blur" }
        ]
      },
      labelwidth: "0px", // 弹窗中lable宽度
      //审批
      approvalRecordData: [],
      approvingType: {
        1: "approving", // 审批中
        2: "withdrawn", // 已撤回
        3: "approvaled", // 审批通过
        4: "sendback", // 审批退回
        5: "unapproval" // 审批不通过
      },
      approving: "", // 审批状态
      approvingStatus: false // 审批状态展示 ==2不展示其他展示
    };
  },
  components: {
    basicInfo,
    payInfo,
    fileInfo,
    approvalReadRecord
  },
  activated() {},
  created() {},
  mounted() {
    let id = this.$route.query.id;
    let params = {
      id: id,
      workFlow: 1
    };
    this.getDataDetails(params);
  },
  methods: {
    //返回
    handleBack() {
      this.$router.go(-1);
    },
    //退回供应商
    handleTurn() {
      this.dialogVisible = true; // 新建角色弹框开关,
    },
    //弹框点取消
    closeDialog() {
      this.dialogVisible = false;
      this.form.supplierSendBackReason = "";
    },
    //弹框点确定
    handleTure(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          let id = this.$route.query.id;
          let data = {
            id: id,
            supplierSendBackReason: this.form.supplierSendBackReason
          };
          getDataTurn(data).then(res => {
            if (res.data.code == 0) {
              this.dialogVisible = false;
              this.$message({
                message: "退回供应商成功",
                type: "success",
                showClose: true,
                ccuiCustom: true
              });
              this.handleBack();
            }
          });
        }
      });
    },
    getDataDetails(data) {
      getDataDetails(data).then(res => {
        if (res.data.code == 0) {
          this.businessCode = res.data.data.replacePayCode;
          this.basicInfo = res.data.data;
          this.titleName = res.data.data.replacePayName;
          let otherUploadIds = res.data.data.otherUploadIds;
          otherUploadIds.forEach(item => {
            item.fileTypeName = "其他";
          });
          let payUploadIds = res.data.data.payUploadIds;
          payUploadIds.forEach(item => {
            item.fileTypeName = "代付申请单";
          });
          let arrayAll = otherUploadIds.concat(payUploadIds);
          arrayAll.sort((a, b) => a.sn - b.sn);
          this.fileList = arrayAll;
          this.isTrue = true;
          this.approvalRecordData = res.data.data.approveRecords;
          this.approvalRecordData.forEach(item => {
            if (item.operState === 0) {
              item.icon = "el-icon-time";
              item.color = "#F5A623";
            }
          });
          this.approving = this.approvingType[res.data.data.approvalStatus];
          if (res.data.data.approveRecords.length > 0) {
            this.approvingStatus = false;
            this.$nextTick(() => {
              this.approvingStatus = true;
            });
          }
        }
      });
    },
    handleReset() {
      let id = this.$route.query.id;
      let data = {
        id: id
      };
      getDataSubmit(data).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: "保存并提交成功",
            type: "success",
            showClose: true,
            ccuiCustom: true
          });
          this.handleBack();
        }
      });
    },
    //导出
    async handleExport() {
      const data = {
        id: this.$route.query.id,
        type: "smpreplacepay/detailExport"
      };
      exportData(await detailExport(data));
    }
  },
  beforeRouteLeave(to, from, next) {
    for (var key in this.$vnode.parent.parent.componentInstance.cache) {
      delete this.$vnode.parent.parent.componentInstance.cache[
        ishasAgentId(to.path, key)
      ];
    }
    next();
  }
};
</script>
<style lang="scss" scoped>
.details-box {
  width: 100%;
  min-height: calc(100vh - 260px);
  float: left;
  background: #fff;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 15px;
  margin-bottom: 80px;
}
/deep/ .approval-read-record {
  margin-top: 0px;
}
/deep/.el-tabs__nav-next {
  top: -8px;
}
/deep/ .el-tabs__nav-prev {
  top: -8px;
}
/deep/ .el-table--fit {
  margin-top: 20px !important;
}
.revokedDIalog {
  /deep/ .el-dialog__body {
    padding: 20px;
  }
  /deep/ .el-textarea .el-textarea__inner {
    resize: none !important; //主要是这个样式
    padding: 5px 10px;
    padding-bottom: 0px;
    overflow: auto;
    height: 90px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  /deep/ .el-textarea .el-input__count {
    right: 10px;
  }
}
</style>
